.root{
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  .user{
    display: flex;
    image{
      width: 65px;
      height: 65px;
      border-radius: 50%;
      margin-right: 10px;
    }
    view{
      display: flex;
      padding: 8px 0;
      flex-direction: column;
      justify-content: space-between;
      text:first-child{
        font-size: 16px;
      }
      .one{
        width: 60px;
      }
      .two{
        width: 50px;
      }
      text:last-child{
        padding: 3px 5px;
        box-sizing: border-box;
        background-color: rgba(221, 221, 221, 0.596);
        border-radius: 4px;
        color:#606266;
      }
    }
  }
  .middle{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    margin-top: 20px;
    >view{
      height: 150rpx;
      background-color: #ccc;
      border-radius: 8px;
      display: flex;
      align-items: center;
      padding: 15px;
      box-sizing: border-box;
      .info{
        flex:1;
        display: flex;
        flex-direction: column;
        text:first-child{
          font-size: 14px;
          font-weight: bolder;
        }
        text:last-child{
          font-size: 12px;
          font-weight: lighter;
        }
      }
      image{
        width: 40px;
        height: 40px;
      }
    }
    .item1{
      background-image: linear-gradient(to right, #fffbf4 0%, #fff4e6 100%);
    }
    .item2{
      background-image: linear-gradient(to right, #fcf1f2 0%, #ffe3e7 100%);
    }
    .item3{
      background-image: linear-gradient(to right, #fffbf4 0%, #fff4e6 100%);
    }
    .item4{
      background-image: linear-gradient(to right, #fffbf4 0%, #fff4e6 100%);
    }
  }
  .bottom{
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    .title{
      font-size: 16px;
      margin-bottom: 15px;
    }
      >view{
        display: flex;
        justify-content: space-between;
        .item{
          height: 110rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          text:first-child{
            font-size: 28px;
          }
        }
    }
    .contact{
      position: relative;
      .contact-btn{
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
      }
    }
  }
  .logout{
    width: 100%;
    height: 36px;
    margin-top: 40px;
    background-color: #ff8a9d;
    color:#fff;
    font-size: 14px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .myInfo{
    display: flex;
    flex-direction: column;
   align-items: center;
   padding: 20px;
   box-sizing: border-box;
   .title{
     font-size: 14px;
     font-weight: bolder;
   }
   text{
     line-height: 18pt;
   }
  }
}